<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <title>五子棋</title>
    <style>
        .body_class {
            background-image: url("img/img_2.png");
            height: 100%;
            background-size: 100%;
            display: flex;
            flex-direction: row;
            align-items: center; /*纵向居中*/
            justify-content: center; /*横向居中*/
        }

        .main_div {
            height: 270px;
            width: 400px;
           /* background-color: bisque;*/
            border-radius: 10px;
            display: flex;
            flex-direction: column; /*水平排列*/
            align-items: center; /*纵向居中*/
        }

        .title_span {
            margin-top: 30px;
            font-size: 20px;
            font-family: 楷体;
            text-shadow: 2px 2px 2px #f552ff;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: -19px;
        }

        .title_span1 {
            margin-top: 20px;
            font-size: 20px;
            font-family: 楷体;
            text-shadow: 2px 2px 2px #f552ff;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: -19px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        //全局变量
        var codeKey
        //页面加载时触发
        $(function () {
            //生成一个随机数
            codeKey = Math.random() * 100000;
            //生成验证码
            createCode();
        });
        //去注册
        goRegisterPage = function () {
            location.href = "register.html"
        }

        //重新生成验证码
        function createCode() {
            //个image标签重新设置src属性。发送请求
            $("#codeImg").attr("src", "http://localhost:8080/user/code?codekey=" + codeKey + "&time=" + new Date().getTime());
        }

        //登录
        function  login() {
            var username = $("#username").val();
            var password = $("#password").val();
            var code = $("#code").val();

            //前端校验
            //发送ajax
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/user/login",
                data: {
                    username: username,
                    password: password,
                    codekey: codeKey,
                    code: code
                },
                success: function (data) {
                    //服务器返回的结果
                    if (data) {
                        alert(JSON.stringify(data));
                        if (data.username == "-1") {
                            alert("验证码错误");
                            return;
                        }
                        // alert("登录成功")
                        //保存登录凭证（就是用户名，昵称，id号，头像等）
                        //密码千万不能保存到客户端
                        //localStorage
                        localStorage.setItem("uid", data.id);
                        localStorage.setItem("username", data.username);
                        localStorage.setItem("nickname", data.nickname);
                        localStorage.setItem("header", data.header);
                        localStorage.setItem("happyBean", data.happyBean);
                        //跳到登录页面
                        location.href = "gamehome.html"
                    } else {
                        alert("登录失败，用户名或密码错误")
                    }
                    //把JS对象转为字符串
                    //js非null默认为true
                    // alert(JSON.stringify(data))
                }
            })
        }

        //忘记密码
        function forgetPassword() {
            location.href = "forgetpassword.html";
        }
    </script>
</head>
<body class="body_class">
<div class="main_div">
    <span class="title_span" style="margin-top: 10px">五子棋游戏</span>
    <div class="title_span">
        账号：<input id="username" placeholder="请输入账号"/>
    </div>
    <div class="title_span">
        密码：<input id="password" type="password" placeholder="请输入密码"/>
    </div>
    <div class="title_span" style="padding-bottom: 10px">
        验证码：<input id="code" style="width: 50px;" placeholder="验证码"/>
        <img src="http://localhost:8080/user/code"
             id="codeImg"
             onclick="createCode()"
             style=" width: 60px; height: 40px;margin-left: 10px;  background-color: #FFFFFF">
    </div>
    <div class="title_span1">
        <button onclick="goRegisterPage()" style="margin-right: 30px">注册</button>
        <button onclick="login()" style="margin-left: 30px">登录</button>
        <button onclick="forgetPassword()" style="margin-left: 60px">忘记密码？</button>
    </div>
</div>
</body>
</html>
